<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>数据填写界面</title>
    <meta charset="utf-8">
    <style>
    	html, body{ margin:0; height:100%; }
    	table{font-size:18px}
    	.input{width:250px;margin:4px;height:35px;border: 1px solid #ccc;font-size:18px;border-radius:4px}
    	label{margin:4px}		
    	.btn{width:100px;height:35px;border-radius:4px;background:#6CAEF5;font-size:18px;margin:15px}	
    </style>
    <script>
    
    $(function(){
    	var datagrid; //定义全局变量datagrid
        var editRow = undefined; //定义全局变量：当前编辑的行
        
        //解析data         
        var dataJson = eval('${requestScope.data}');        
        //旧数据
        var oldDataJson=eval('${requestScope.oldData}');
        var planData=eval('${requestScope.planData}');
        var isPlan='${requestScope.isPlan}';
	
        
        
        var field=new Array();
        var dataSet=new Array();
    	field.push({'field':'行名','title':'行名','sortable':true,'width':150});
        //生成field
        $(dataJson).each(function(index,element) {
        	if(element.itemType==1){
            	var fieldItem={'field':element.columnCode,'title':element.name,'width':150};
            	//fieldItem.sortable=true;
            	
            	switch(element.type){
            		case 0:
            		case 3:
            			fieldItem.editor={ type: 'validatebox', options: { required: false} }; 
            			break;
            		case 2:
            			fieldItem.editor={ type: 'numberbox', options: { required: false} }; 
            			break;
            		case 1:
            			fieldItem.editor={ type: 'datebox', options: { required: false} }; 
            			break;           			
            	}             	
            	field.push(fieldItem);
        	}else{
        		var dataItem={'行名':element.name};
        		
        		if(oldDataJson!=null){
        			$(oldDataJson).each(function(index2,element2) {
        				if(element2.行名==element.name){
        					dataItem=element2;
        				}
        			})
        		}
        		
        		dataSet.push(dataItem);
        	}

        })
        
        datagrid = $('#baseType').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		//pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
           // width:350,
            height:'98%',
			data:dataSet,
    		//url:"${path}/cootasktable/tablebase",
    		columns: [field],	         
            toolbar: [
             { text: '修改', iconCls: 'icon-edit', handler: function () {
                 //修改时要获取选择到的行
                 var rows = datagrid.datagrid("getSelections");
                 //如果只选择了一行则可以进行修改，否则不操作
                 if (rows.length == 1) {
                     //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
                     if (editRow != undefined) {
                         datagrid.datagrid("endEdit", editRow);
                     }
                     //当无编辑行时
                     if (editRow == undefined) {
                         //获取到当前选择行的下标
                         var index = datagrid.datagrid("getRowIndex", rows[0]);
                         //开启编辑
                         //datagrid.datagrid("beginEdit", index);
                         //把当前开启编辑的行赋值给全局变量editRow
                         editRow = index;        
                         
                         datagrid.datagrid("beginEdit", editRow);

                         //当开启了当前选择行的编辑状态之后，
                         //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                         datagrid.datagrid("unselectAll");
                     }
                 }
              }
             }
             ,'-',
             { text: '保存', iconCls: 'icon-save', handler: function () {
                 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                 datagrid.datagrid("endEdit", editRow);
             }
             }, '-',
             { text: '取消编辑', iconCls: 'icon-redo', handler: function () {
                 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                 editRow = undefined;
                 datagrid.datagrid("rejectChanges");
                 datagrid.datagrid("unselectAll");
             	}
             }
             ],
             
             
            onAfterEdit: function (rowIndex, rowData, changes) {
                //endEdit该方法触发此事件
                editRow = undefined;
                 if(rowData != null&&!$.isEmptyObject(changes)){
                	 
                	var data = datagrid.datagrid('getData').rows;
                	
                	//console.log(data);
                	
                	var datastr = JSON.stringify(data) 
                	
                	//console.log(datastr);
                <c:choose> 
                	<c:when test="${isPlan==1}">
                	//	alert('isPlan');
                		var dataToPost= {'id':'${taskUserID}','planData':data};
                	</c:when>
                	<c:otherwise>
                //		alert('isNotPlan');
                		var dataToPost= {'id':'${taskUserID}','userData':data};
                	</c:otherwise> 
            	</c:choose> 

          			$.ajax({
           			 	url: "${path}/tasktrans/feTaskUser",    //请求的url地址
           			 	dataType: "json",   //返回格式为json
           			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
           			 	contentType: 'application/json',
           			 	data:JSON.stringify(dataToPost) ,//{ "courseTextbook":courseTextbook },    //参数值
           			 	type: "post",   //请求方式
           			 	success: function(req) {
           			 		if(req.status=='1'){
           			 			datagrid.datagrid("reload");	
           			 		}else{
           			 			$.messager.alert("提示", req.msg,"info"); 
           			 		}                			 		
        				},
        				error:function(req) {
        					$.messager.alert("警告", "修改出错","error"); 
        				}
        			})            	
                }  
            },
            onClickRow:function (rowIndex, rowData) {           	
            	selectedid=rowData.id;
            },
            onDblClickRow: function (rowIndex, rowData) {
            //双击开启编辑行h
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                    editRow=undefined;
                }
                if (editRow == undefined) {
                 	datagrid.datagrid("beginEdit", rowIndex);
                    editRow = rowIndex;  
                }
            	//禁止单元格编辑
            	if(isPlan==0){
            	
				$(planData).each(function(index,element) {
					if(element.行名 == rowData.行名){
						$.each(element, function(key, val) {
							if(val!=null&&val!=''){
							var ed = datagrid.datagrid('getEditor', {
            					'index': index,
            					'field': key
            				});
							}							
            				if(ed!=null){
            					$(ed.target).attr("disabled", true);
            				}	
						});						
					}
				});
			}
/*				if(row && row.itemid =='EST-15')
            		{
            			var ed2 = $('#dg').datagrid('getEditor', {
            				'index': editIndex,
            				field: 'attr1'
            			});
            			$(ed2.target).attr("disabled", true);

            		}*/
    	}
	})
    
  
/*      var pager = datagrid.datagrid('getPager');   
    pager.pagination({
  	               total:2000,
  	               pageSize:10, 	
  	               pageNumber:1,
  	               pageList:[10,20,30],  	               
  	               loading:true,
  	               showPageList:true,
  	               showRefresh:true,
  	               beforePageText:'当前页数',
  	               afterPageText:' 共{pages}页',
  	               displayMsg:'共{total}条记录'
  	           });   */

}) 
    
    </script>
</head>
<body>
	<div id="gridlayout" class="easyui-layout" style="width:100%;height:100%;">
		<div data-options="region:'center'"  style="width:350px">
		 	<table id="baseType" title="数据填写界面" class="easyui-datagrid" 
					singleSelect="true" iconCls="icon-save">
			</table>
		</div>
		<!-- style="width:850px" ;padding:10px-->
		<!--  style="width:850px" 
		<div data-options="region:'center',split:true" >
		 	<table id="baseTypeCode" title="数据字典条目" class="easyui-datagrid"
					singleSelect="true" iconCls="icon-save">
			</table> 
		</div>-->
	</div>
</body>
</html>
